<template>
  <div class="leftxiaobox" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var chartDom = document.querySelector(".leftxiaobox");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
     // 提示
      tooltip: {
        //   鼠标放在坐标轴的时候   显示tooltip
        trigger: "axis",
        axisPointer: {
          //  十字交叉类型
          type: "cross",
        },
        backgroundColor: "rgba(0, 0, 0,0.7)", //  tooltip的背景色
        textStyle: {
          color: "#fefefe", //  tooltip文字
        },
      },
      title: {
        //   标题内容
        text: "新增确诊TOP10",
        //  标题居中对齐
        textAlign: "center",
        //  标题水平位置
        left: "50%",
        //   标题样式
        textStyle: {
          fontSize: "10",
          color: "#ffffff",
          // 字体加粗
          fontWeight: "normal",
        },
      },
      xAxis: {
        //   类目轴
        type: "category",
        data: [
          "英国",
          "法国",
          "美国",
          "德国",
          "日本",
          "中国",
          "意大利",
          "西班牙",
          "印度",
          "巴西",
        ],
        //   x轴线
        axisLine: {
          show: false,
        },
        //   x刻度
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        //   数值轴
        type: "value",
        //  分割线
        splitLine: {
          //  分割样式
          lineStyle: {
            color: "#1a2350",
          },
        },
        // y轴轴线
        axisLine: {
          show: true,
          lineStyle: {
            color: "#192047",
          },
        },
        //  y轴标签
        axisLabel: {
          color: "#757b90",
        },
      },
      series: [
        {
          data: [
            { name: "英国", value: 39538 },
            { name: "法国", value: 38325 },
            { name: "美国", value: 34126 },
            { name: "德国", value: 30093 },
            { name: "日本", value: 25441 },
            { name: "中国", value: 23770 },
            { name: "意大利", value: 18206 },
            { name: "西班牙", value: 11579 },
            { name: "印度", value: 11305 },
            { name: "巴西", value: 10972 },
          ],
          // 柱状图
          type: "bar",
          //  柱状图的宽度
          barWidth: 10,
          // 柱状图样式
          itemStyle: {
            // 圆角
            borderRadius: [17, 17, 17, 17],
            // 填充色
            color: "#2f89cf",
          },
        },
      ],
      grid: {
        //   网格
        top: "15%",
        left: "20%", //   网格的位置
        right: "10%",
        bottom: "15%",
      },
    };

    option && myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
</style>